<template>
  <div
    class="unit-exbit-null-remarks-info"
    @mouseup="endDrag()"
    :class="{ 'unit-exbit-null-remarks-info-2': props.type }"
  >
    <div id="info-remarks-byId" class="unit-exbit-null-remarks-info-remarks" v-html="props.remarks"></div>
    <div class="solid-box-parent">
      <div
        v-if="isScrollType"
        class="solid-box"
        ref="track"
        @mousedown="startDrag($event)"
        @mousemove="draggings($event)"
        @mouseup="endDrag()"
      >
        <div class="solid-border" :class="'solid-border' + store.styleInfo.colorType"></div>
        <div
          :style="{ top: knobPosition + 'px' }"
          ref="knob"
          class="templatestyle1-scroll-box-tumb"
          :class="'templatestyle1-scroll-box' + store.styleInfo.colorType"
        ></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, computed, onMounted, nextTick } from 'vue';
import { useProjectStore } from '@/store';
const store = useProjectStore();
const isScrollType = ref(false);
const track = ref(null); // 拖动轨道
const knob = ref(null); // 拖动手柄
const knobPosition = ref(0); // 手柄位置
const dragging = ref(false); // 是否拖动中
const per = ref(0);
const props = defineProps({
  remarks: {
    type: String,
  },
  type: {
    type: Number,
  },
});
const startDrag = (event: any) => {
  if (!isScrollType.value) {
    return;
  }
  dragging.value = true;
  let arrs = event.clientY - track.value.getBoundingClientRect().top;
  if (arrs > 200) {
    knobPosition.value = arrs - 40;
  } else {
    knobPosition.value = arrs;
  }
};

// 拖动时更新手柄位置
const draggings = (event: any) => {
  if (!isScrollType.value) {
    return;
  }
  if (!dragging.value) return;
  if (props.type) {
    const trackTop = track.value.getBoundingClientRect().top;
    console.log(trackTop);
    const trackHeight = 560;
    console.log(trackHeight);
    const y = event.clientY - trackTop;
    let arrs = Math.min(trackHeight, Math.max(0, y));
    if (arrs > 560) {
      knobPosition.value = arrs - 40;
    } else {
      knobPosition.value = arrs;
    }
    //   let scrollB=knobPosition.value/200
    var container = document.getElementById('info-remarks-byId'); // 滚动容器
    var scrollPercent = knobPosition.value / 560; // 需要滚动到的百分比
    var scrollHeight = container.scrollHeight; //总滚动高度
    var clientHeight = container.clientHeight; //滚动容器高度
    container.scrollTop = (scrollHeight - clientHeight) * scrollPercent; //设置滚动位置
  } else {
    const trackTop = track.value.getBoundingClientRect().top;
    console.log(trackTop);
    const trackHeight = 200;
    console.log(trackHeight);
    const y = event.clientY - trackTop;
    let arrs = Math.min(trackHeight, Math.max(0, y));
    if (arrs > 200) {
      knobPosition.value = arrs - 40;
    } else {
      knobPosition.value = arrs;
    }
    //   let scrollB=knobPosition.value/200
    var container = document.getElementById('info-remarks-byId'); // 滚动容器
    var scrollPercent = knobPosition.value / 200; // 需要滚动到的百分比
    var scrollHeight = container.scrollHeight; //总滚动高度
    var clientHeight = container.clientHeight; //滚动容器高度
    container.scrollTop = (scrollHeight - clientHeight) * scrollPercent; //设置滚动位置
  }
};

// 结束拖动时更新状态
const endDrag = () => {
  dragging.value = false;
};
const isScrollBox = (element: any) => {
  return element.scrollHeight > element.clientHeight;
};

const initScroll = () => {
  var container = document.getElementById('info-remarks-byId'); // 滚动容器
  if (isScrollBox(container)) {
    isScrollType.value = true;
    console.log('滚动盒子开启滚动');
  } else {
    isScrollType.value = false;
    console.log('滚动盒子开启禁止滚动');
  }
};

const initScrollBox = () => {
  if (!isScrollType.value) {
    return;
  }
  if (props.type) {
    var container = document.getElementById('info-remarks-byId'); // 滚动容器
    container.addEventListener('scroll', function () {
      var scrollTop = container.scrollTop;
      var scrollHeight = container.scrollHeight;
      var height = container.clientHeight;
      var scrolled = (scrollTop / (scrollHeight - height)) * 100;
      knobPosition.value = (560 * scrolled) / 100;
    });
  } else {
    var container = document.getElementById('info-remarks-byId'); // 滚动容器
    container.addEventListener('scroll', function () {
      var scrollTop = container.scrollTop;
      var scrollHeight = container.scrollHeight;
      var height = container.clientHeight;
      var scrolled = (scrollTop / (scrollHeight - height)) * 100;
      knobPosition.value = (200 * scrolled) / 100;
    });
  }
};
onMounted(() => {
  initScroll();
  initScrollBox();
});
watch(
  () => props.remarks,
  () => {
    nextTick(() => {
      initScroll();
      initScrollBox();
    });
  },
  { deep: true },
);
</script>

<style scoped lang="less">
.unit-exbit-null-remarks-info {
  display: flex;

  min-height: 240px;
  position: relative;
  .unit-exbit-null-remarks-info-remarks {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 240px;
    overflow-y: auto;

    font-family: PingFangSC, PingFang SC;
    :deep(span) {
      text-indent: 2em !important;
      font-size: 16px;
      color: #333333;

      font-family: PingFangSC, PingFang SC;
      line-height: 32px;
      margin-bottom: 20px;
    }
  }
}
.solid-box {
  position: relative;
  width: 20px;
  height: 100%;
}
.solid-box-parent {
  position: absolute;
  right: -30px;
  top: 0;
  width: 20px;
  height: 100%;
}
.unit-exbit-null-remarks-info-remarks::-webkit-scrollbar {
  display: none;
}
.templatestyle1-scroll-box-tumb {
  position: absolute;
  position: relative;
  z-index: 60;
}
.templatestyle1-scroll-box1 {
  width: 20px;
  height: 40px;
  background: transparent;
  background-image: url('https://static.jiyi.show/template/template5/scrollbar1.png?imageView2/1/w/20/h/40/format/webp');
  background-repeat: no-repeat;
}
.templatestyle1-scroll-box2 {
  width: 20px;
  height: 40px !important;
  background: transparent;
  background-image: url('https://static.jiyi.show/template/template5/scrollbar2.png?imageView2/1/w/20/h/40/format/webp');
  background-repeat: no-repeat;
}
.templatestyle1-scroll-box3 {
  width: 20px;
  height: 40px;
  background: transparent;
  background-image: url('https://static.jiyi.show/template/template5/scrollbar3.png?imageView2/1/w/20/h/40/format/webp');
  background-repeat: no-repeat;
}
.solid-border {
  position: absolute;
  top: 0;
  left: 8px;
  height: 100%;
  width: 4px;
  border-radius: 5px;
  opacity: 0.3;
}
.solid-border1 {
  background: rgba(69, 46, 32, 0.3);
}
.solid-border2 {
  background: rgba(140, 122, 87, 0.3);
}
.solid-border3 {
  background: rgba(53, 60, 72, 0.3);
}
.unit-exbit-null-remarks-info-2 {
  min-height: 600px;
  position: relative;
  .unit-exbit-null-remarks-info-remarks {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 600px;
    overflow-y: auto;

    font-family: PingFangSC, PingFang SC;
    :deep(span) {
      text-indent: 2em !important;
      font-size: 16px;
      color: #333333;

      font-family: PingFangSC, PingFang SC;
      line-height: 32px;
      margin-bottom: 20px;
    }
  }
}
</style>
